<script setup lang="ts">
import { getBannerList, getCategory, getRandom } from '@/api/game'
import { ref } from 'vue'
import GameCard from './GameCard.vue'
import type { IBanner, IRomInfo } from '@/types'
import GameCardBig from './GameCardBig.vue'

/*
 * 轮播图数据
 */
let bannerList = ref<IBanner[]>()
let onLoadingBanner = ref(true)
const fetchData = async () => {
  try {
    const response = await getBannerList()
    bannerList.value = response.data.banner
    bannerList.value?.length === 0
      ? (onLoadingBanner.value = true)
      : (onLoadingBanner.value = false)
  } catch (error) {
    console.log(error)
  }
}
fetchData()

/*
 * 推荐游戏
 */
let recommendList = ref<IRomInfo[]>()
let onLoadingRecommend = ref(true)
const fetchRecommend = async () => {
  try {
    const response = await getRandom(4)
    recommendList.value = response.data.result
    recommendList.value?.length === 0
      ? (onLoadingRecommend.value = true)
      : (onLoadingRecommend.value = false)
  } catch (error) {
    console.log(error)
  }
}
fetchRecommend()

/*
 * 热门游戏
 */
let hotList = ref<IRomInfo[]>()
const fetchHot = async () => {
  try {
    const response = await getRandom(6)
    hotList.value = response.data.result
  } catch (error) {
    console.log(error)
  }
}
fetchHot()

/* 热度榜 */
let asideList = ref<IRomInfo[]>()
const fetchAside = async () => {
  try {
    const response = await getRandom(10)
    asideList.value = response.data.result
  } catch (error) {
    console.log(error)
  }
}
fetchAside()

/* 游戏分类 */
let categoryList = ref()
const buttonColor = [
  'primary',
  'success',
  'warning',
  'info',
  'warning',
  'danger',
  'success',
  'primary',
  'warning',
  'success',
  'danger'
]
const fetchCategoryList = async () => {
  try {
    const response = await getCategory()
    categoryList.value = response.data.categorys
  } catch (error) {
    console.log(error)
  }
}
fetchCategoryList()
</script>

<template>
  <div class="home-body">
    <!-- 
      轮播图
     -->
    <div class="bg-banner">
      <!-- 加载骨架屏 -->
      <el-skeleton :loading="onLoadingBanner" animated>
        <!-- 骨架屏 -->
        <template #template>
          <el-carousel v-show="onLoadingBanner" height="400px" :interval="4000" type="card">
            <el-carousel-item v-for="item in 3" :key="item">
              <el-skeleton-item style="width: 100%; height: 100%; opacity: 0.5" />
            </el-carousel-item>
          </el-carousel>
        </template>
        <!-- 轮播图 -->
        <template #default>
          <el-carousel v-show="!onLoadingBanner" height="400px" :interval="4000" type="card">
            <el-carousel-item v-for="banner in bannerList" :key="banner.id">
              <img
                :src="banner.image"
                @click="$router.push({ path: '/play', query: { id: banner.id } })"
              />
            </el-carousel-item>
          </el-carousel>
        </template>
      </el-skeleton>
    </div>

    <!-- 
  游戏推荐
 -->
    <div class="game-container">
      <el-row justify="space-between" class="row-title">
        <el-button @click="fetchRecommend" class="recommend-title"
          >游戏推荐<el-icon><RefreshRight /></el-icon
        ></el-button>
        <RouterLink to="/gamelist"
          ><el-button round>
            更多<el-icon><ArrowRight /></el-icon></el-button
        ></RouterLink>
      </el-row>
      <!-- 加载骨架屏 -->
      <el-skeleton :loading="onLoadingRecommend" animated>
        <!-- 骨架屏 -->
        <template #template>
          <el-skeleton-item variant="image" style="width: 1200px; height: 240px" />
        </template>
        <!-- 游戏推荐 -->
        <template #default>
          <el-row :gutter="20" justify="space-between" class="game-list">
            <el-col :span="6" v-for="recommend in recommendList" :key="recommend.id">
              <GameCard :item="recommend" />
            </el-col>
          </el-row>
        </template>
      </el-skeleton>

      <!-- 
  热门游戏
 -->
      <el-row :gutter="40" justify="space-between" style="margin-top: 30px">
        <el-col :span="18">
          <el-row :gutter="40" justify="space-between">
            <el-col :span="12" v-for="hot in hotList" :key="hot.id" class="hot-game">
              <GameCardBig :item="hot" style="margin-top: 30px" />
            </el-col>
          </el-row>
        </el-col>
        <!-- 侧边栏 -->
        <el-col :span="6">
          <!-- 热度榜 -->
          <el-row :gutter="20" justify="space-between" style="margin-top: 30px">
            <span style="font-size: 20px; margin: auto 0">热度榜</span>
            <el-button round @click="$router.push('/gamelist')">
              更多<el-icon><ArrowRight /></el-icon
            ></el-button>
          </el-row>
          <el-row v-for="aside in asideList" :key="aside.id">
            <el-link :underline="false" :href="'/play?id=' + aside.id" style="margin-top: 20px">{{
              aside.title
            }}</el-link>
          </el-row>
          <!-- 游戏分类 -->
          <el-row :gutter="20" justify="space-between" style="margin-top: 30px">
            <span style="font-size: 20px; margin: auto 0">游戏分类</span>
            <RouterLink to="/gamelist"
              ><el-button round>
                更多<el-icon><ArrowRight /></el-icon></el-button
            ></RouterLink>
          </el-row>
          <el-row :gutter="20" justify="start" style="margin-top: 20px">
            <el-col :span="8" v-for="(item, index) in categoryList" :key="item.index">
              <el-button :type="buttonColor[index]" :item="item" style="margin-top: 10px">{{
                item.name
              }}</el-button>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<style scoped lang="scss">
/* 轮播图 */
.bg-banner {
  height: 410px;
  background-image: url('@/assets/home_bg.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.bg-banner {
  padding: 40px;
}
.el-carousel {
  max-width: 1200px;
  margin: 0 auto;
}
.el-carousel__item {
  border-radius: 14px;
  img {
    width: 100%;
    height: 400px;
  }
}
/* 游戏推荐 */
.row-title {
  height: 50px;
  align-items: center;
}
.recommend-title {
  padding: 20px 0;
  font-size: 20px;
  color: #4d4d4d;
  border: none;
}
.game-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}
</style>
